<template name="monitoreo">
<html>
    <head>
        <title>SETU :: Monitoreo</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
        <link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
        <script type="text/javascript" src="/js/jquery.js"></script>
        <script type="text/javascript" src="/js/jquery-ui.js"></script>
        <script type="text/javascript" src="/js/ui.tabs.paging.js"></script>
        <script type="text/javascript" src="/js/scripts.js"></script>
        <script type="text/javascript" src="/js/monitor.js"></script>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <!-- MAPA CONTAINER -->
        <div id="monitoreo_mapa_container">
            <div id="mapa_loader">
                <div id="mapa_loader_bg"></div>
                <div id="mapa_loader_content">
                    <span>Cargando...</span><br/><br/>
                    <img src="/images/maps/loading.gif" />
                </div>
            </div>
            <div id="mapa"></div>
            <div id="locker_buttons">
                <div id="lock_mapa">Centrar</div>
                <div id="unlock_mapa">Centrar</div>
            </div>
        </div>
        <!-- /MAPA CONTAINER -->
        <!-- MONITOREO TOOLBAR -->
        <div id="monitoreo_toolbar" class="{{extra_class}}">
            <div id="info">
                <div id="info_content">
                    <div id="info_logo">
                        <img src="/images/monitoreo/logo.png" height="100%" />
                    </div>
                    <div id="info_clock">
                        <div id="clock_date">00/00/00</div>
                        <div id="clock_time">00:00</div>
                    </div>
                </div>
            </div>
            <div class="ruta_info" id="ruta_foo">
                <div class="ruta_color"></div>
                <div class="ruta_color_ref">Color</div>
                <div class="ruta_icons"><input type="checkbox" checked="checked"/></div>
            </div>
            <div id="rutas">
                <ul id="rutas_header"></ul>
            </div>
            <div class="vehiculo_info" id="vehiculo_foo">
               <div class="vehiculo_color"><img class="vehiculo_color_image" height="100%" /></div>
               <div class="vehiculo_nombre"></div>
               <div class="vehiculo_conductor"></div>
               <div class="vehiculo_ruta"></div>
               <div class="vehiculo_salida"></div>
               <div class="vehiculo_llegada_esperada"></div>
               <div class="vehiculo_llegada_real"><strong>Fin de viaje: </strong><span class="vehiculo_llegada_real_value">-</span></div>
               <div class="vehiculo_proximo_punto"><strong>Pr&oacute;ximo punto: </strong><span class="vehiculo_proximo_punto_value">-</span></div>
               <div class="vehiculo_proximo_punto_llegada"><strong>Llegada pr&oacute;ximo: </strong><span class="vehiculo_proximo_punto_llegada_value">-</span></div>
               <div class="vehiculo_puntos_info">
               </div>
               <div class="vehiculo_velocidad">
                    <div class="vehiculo_velocidad_value">00</div>
                    <div class="vehiculo_velocidad_ref">km/h</div>
               </div>
            </div>
            <div class="vehiculo_punto" id="vehiculo_punto_foo">
                <div class="vehiculo_punto_nombre">NOMBRE PUNTO</div>
                <div class="vehiculo_punto_estado">[AA]</div>
                <div class="vehiculo_punto_hora">00:00</div>
            </div>
            <div id="vehiculos">
                <ul id="vehiculos_header"></ul>
            </div>
        </div>
        <!-- /MONITOREO TOOLBAR -->
        <!-- DIALOG BEGIN -->
        <div id="dialog_overlay" class="{{dialog_on}}"></div>
        <div id="dialog" class="{{dialog_on}}">
            <div id="dialog_title">
                <div id="dialog_title_text">AVISO</div>
                <div id="dialog_title_close">X</div>
            </div>
            <div id="dialog_content">
            </div>
        </div>
        <!-- EMBED MAPS API FOR ASETU -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing&key=AIzaSyDEfyw7eaca4DLz_p9c5fjYmfVT_eN0UHU"></script>
        <script type="text/javascript">
          var script = '<script type="text/javascript" src="http://google-maps-' +'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';
          if (document.location.search.indexOf('compiled') !== -1) { script += '-compiled'; }
          script += '.js"><' + '/script>';
          document.write(script);
        </script>
        <!-- /EMBED MAPS API FOR ASETU -->
        <script type="text/javascript">

            var timeDiff = {{server_time}} - Math.round(new Date().getTime()/1000.0);

            google.maps.event.addDomListener(window, 'load', function() { monitoreo.init({{individualViaje}}); } );

            function mapReady()
            {
                monitoreo.setTimeDiff(timeDiff);
                monitoreo.addInfoToken('{{info_token}}');

                // Rutas
            <template name="ruta">
                var ruta = {'id': {{idruta}}, 'nombre':'{{nombre_ruta}}', 'camino':Array(), 'puntos':Array()};
                <template name="ruta_camino">
                ruta['camino'].push({'lat':{{lat}}, 'lng':{{lng}}});
                </template>
                <template name="ruta_punto">
                ruta['puntos'].push({'id': {{idpunto_por_ruta}}, 'lat': {{latitud}}, 'lng': {{longitud}}, 'nombre': '{{nombre}}', 'segundos_anterior':{{segundos_anterior}}});
                </template>
                monitoreo.addRuta(ruta);
            </template>
                // Viajes
            <template name="viaje">
                var viajeData = {{viaje}};
                monitoreo.addViaje({{idviaje}}, viajeData);
            </template>
                // Geolocalizaciones
            <template name="geolocalizacion">
                monitoreo.parseGeolocalizacion({{geolocalizacion}}, false);
            </template>
                monitoreo.parsePrimerCargaDeGeolocaziones();
            }

            $(function(){
                $('#rutas, #vehiculos').tabs();
                $('#lock_mapa').button( { icons: {primary: "ui-icon-locked"} } ).bind('click', function(){ monitoreo.unlockMapa(); });
                $('#unlock_mapa').button( { icons: {primary: "ui-icon-unlocked"} } ).bind('click', function(){ monitoreo.lockMapa(); });
            });
        </script>
    </body>
</html>
</template>